<template>
  <div :class="bem()">
    <div :class="bem('body')">
      <a-menu
          theme="dark"
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
          mode="horizontal"
          @click="handleClick"
          :inline-collapsed="collapsed"
      >
        <template v-for="item in portalRoutes" :key="item.path">
          <template v-if="!item.children">
            <a-menu-item v-if="!item.meta?.hideMenu" :key="item.path">
              <span style="color: #fff">{{ item.meta.title }}</span>
            </a-menu-item>
          </template>
          <template v-else>
            <template v-if="!item.meta?.hideMenu">
              <template v-if="(item.children.length === 1 && (item.children[0].meta?.hideMenu)) || (item.children.length === item.children.filter(i => i.meta.hideMenu).length)">
                <a-menu-item :key=" item.path+'/'+item.children[0].path">
                  <span style="color: #fff">{{ item.children[0].meta.title }}</span>
                </a-menu-item>
              </template>
              <template v-else>
                <c-sub-menu :key="item.path" :menu-info="item"/>
              </template>
            </template>
          </template>
        </template>
      </a-menu>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Menu"
}
</script>

<script lang="ts" setup>

import {createBEM} from "/@/utils/bem";
import {ref, watch} from "vue";
import CSubMenu from "/@/layouts/components/subMenu.vue";
import {useGo} from "/@/hooks/web/usePage";
import {useRouter} from "vue-router";
import {portalRoutes} from "/@/router/portal";

const [bem] = createBEM('menu')

const go = useGo();
const router = useRouter();

// function transformMenu(portalRoutes:any) {
//   const menus = portalRoutes;
//   menus.forEach((item:any) => {
//     if (item.children && item.children.length > 0) {
//       const children = item.children;
//       const length = item.children.length;
//       const noHiddenChildren = children.filter(i => !i.meta?.hideMenu);
//       const hiddenChildrenLength = length - noHiddenChildren.length;
//       if (hiddenChildrenLength === 0){
//         transformMenu(noHiddenChildren);
//       }else {
//         item.children = [item.children[0]]
//       }
//     }
//   })
//   return menus;
// }
// const menus = transformMenu(portalRoutes);

function useMenu() {
  const openKeys = ref(['/home/index']);
  const selectedKeys = ref(['/home/index']);
  const collapsed = ref(false);

  //监控
  watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
    selectedKeys.value = [newValue];
  }, {immediate: true})


  function handleClick({item, key, keyPath}) {
    go(key)
  }

  return {
    openKeys,
    selectedKeys,
    collapsed,
    handleClick
  }
}

const {openKeys, selectedKeys, collapsed, handleClick} = useMenu();


</script>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-menu';

.@{prefix-cls} {
  background-color: @theme-color;
  min-width: @layout-main-width;
  width: 100%;

  &__body {
    width: @layout-main-width;
    margin: 0 auto;

  }
}


</style>
